<template>
	<view class="home">
		<view style="background-image: url(https://api.shengqianxiong.com.cn/img/20201121/3271622ea11a4daab0111ead0f1ff730.png);
		background-size: 100%;height: 150upx;position: absolute;top: 250upx;width: 572upx;z-index: 100;margin-left: 13%;"></view>
		<view class="home-wheel">
			<view style="width: 100%;text-align: center;font-size: 30upx;color: #ED9B38;height: 80upx;">{{ targetNumberName }}</view>
			<almost-lottery :prize-list="prizeList" :ring-count="2" :duration="1" :canvas-width="canvasData.width"
			 :canvas-height="canvasData.height" :prize-index="prizeIndex" @reset-index="prizeIndex = -1" @draw-start="handleDrawStart"
			 @draw-end="handleDrawEnd" @finish="handleDrawFinish" v-if="prizeList.length" />
			<text class="almost-lottery__tip" v-else>奖品准备中...</text>

			<view class="home-result" v-if='targetName'>
				<text class="home-result__text">{{ targetName }}</text>
			</view>
		</view>
		<view style="background-image: url(https://api.shengqianxiong.com.cn/img/20201121/47e5a3560b0643eeab2def21ca9ae860.png);
		background-size: 100%;height: 456upx;width: 702upx;margin-left: 3%;margin-top: 130%;padding: 20rpx;">
			<view style="text-align: center;margin-top: 20upx;margin-bottom: 16upx;padding-top: 16upx;">
				<text class="news_title">一一一</text>
				<text style="font-size: 36upx;color: #FF6C00;">中奖榜单</text>
				<text class="news_title">一一一</text>
			</view>

			<scroll-view scroll-y="true" style="height: 300rpx;">
				<view style="width: 100%;text-align: center;" v-for="(item,index) in messageList">
					<view style="display: flex;margin-top: 5upx;background: #FFEBBD;height: 63upx;line-height: 63upx;">
						<view style='width:33%'>{{item.nickName}}</view>
						<view style='width:33%'>{{item.addJiFen}}</view>
						<view style='width:50%'>{{item.createTime}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue'
	export default {
		name: 'Home',
		components: {
			AlmostLottery
		},
		data() {
			return {
				backImage: 'https://api.shengqianxiong.com.cn/img/20201116/fb130a63f5324feb9e0268d544b56f64.png',
				backMessage: 'https://api.shengqianxiong.com.cn/img/20201116/c4f6da69d0034110a5b7dd18f401c515.png',
				nickName: '',
				// canvas 宽高
				canvasData: {
					width: 220,
					height: 220
				},
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				page: 0,
				size: 10000000,
				// 中奖类目名称
				targetName: '',
				targetNumber: '',
				targetNumberName: '',
				targetName1: '',
				// 权重随机数的最大值
				weightTotal: 100,
				// 权重数组
				weightArr: [],
				messageList: []
			}
		},
		onLoad() {
			this.nickName = this.$queue.getData('nickName');
			this.getList();
			this.getChoujiangMoney();
			this.getMessageList();
			this.getChoujiangNumber();
		},
		onUnload() {
			uni.hideLoading()
		},
		methods: {
			getChoujiangMoney() {
				this.$Request.getT('/selfPrizeRule/find?id=1').then(res => {
					if (res.status === 0) {
						this.targetName = res.data.jiFen + '积分抽奖一次'
					}
				});
			},
			getChoujiangNumber() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/selfPrizeUser/checkNumber?prizeRuleId=1&userId=' + userId).then(res => {
					if (res.status === 0) {
						this.targetNumberName = '今日剩余抽奖次数' + res.data;
						this.targetNumber = res.data;
					}
				});
			},
			getMessageList() {
				this.$Request.getT('/selfPrizeUser/list?page=' + this.page + '&size=' + this.size + '&nickName=' + this.nickName).then(
					res => {
						if (res.status === 0) {
							if (this.page === 0 || res.status) {
								this.messageList = [];
							}

							res.data.content.forEach(d => {
								this.messageList.push(d);
							});
						}
					});
			},
			getList() {
				this.$Request.getT('/selfPrize/list?prizeRuleId=1').then(res => {
					if (res.status === 0) {
						this.prizeList = res.data;
						this.weightArr = this.prizeList.map((item) => item.weight)
					}
				});
			},
			// 本次抽奖开始
			handleDrawStart() {
				if (this.targetNumber < 1) {
					this.$queue.showToast('你今日的抽奖次数已达上限，明天再来试吧！');
					return;
				}
				this.targetName1 = ''

				let userId = this.$queue.getData('userId');
				let mobile = this.$queue.getData('nickName');
				this.$Request.getT('/selfPrize/play?prizeRuleId=1&userId=' + userId + '&nickName=' + mobile).then(res => {
					if (res.status === 0) {
						this.targetName1 = res.data.prize.name;
						this.prizeIndex = res.data.index;
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			// 本次抽奖结束
			handleDrawEnd() {
				// 旋转结束后，可以执行拿到结果后的逻辑
				let prizeName = this.targetName1;
				this.targetName = prizeName;
				this.getMessageList();
				this.getChoujiangNumber();
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				console.log('抽奖转盘绘制完成', res)

				uni.showToast({
					title: res.msg,
					duration: 4000,
					mask: true,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url(https://api.shengqianxiong.com.cn/img/20201121/1de1b918598d43e4be7ca6c2f8df05fb.png);
		background-size: 100%;
		width: 750upx;
		height: 1847upx;
	}

	.home {
		padding: 225rpx 0rpx 50rpx 0rpx;
	}

	.home-title {
		text-align: center;
		margin-bottom: 50px;
	}

	.home-title__text {
		color: #000;
		font-size: 30px;
		font-weight: bold;
	}

	.home-result {
		text-align: center;
		margin-left: 12%;
		margin-top: 20px;
		background-image: url(https://api.shengqianxiong.com.cn/img/20201116/c4f6da69d0034110a5b7dd18f401c515.png);
		width: 500rpx;
		height: 83rpx;
		line-height: 83rpx;
		background-size: 100%;
	}

	.home-result__text {
		color: #FF3355;
		font-size: 20px;
		font-weight: bold;
	}

	.news_title {
		font-weight: bold;
		color: #FEC443;
		margin-right: 32upx;
		margin-left: 32upx;
		width: 12upx;
	}

	.home-wheel {
		position: absolute;
		width: 90%;
		margin: 100upx 20upx 20upx 40upx;
		padding: 60upx 20upx 20upx 20upx;
		border-radius: 15upx;
		background: #FFF7E4;
		text-align: center;
	}

	.almost-lottery__tip {
		font-size: 24rpx;
	}

	.home-action {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 40rpx;
		width: 260rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		text-align: center;
		background-color: red;
		margin: 0 auto;
	}

	.home-action__text {
		color: #FFFFFF;
		font-size: 24rpx;
	}
</style>
